<template>
	<div class="share-page">
		<el-breadcrumb separator=">">
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/sale' }">在售商品</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="sale-page">
			<div class="choice-list">
				<div class="choice-item" v-for="item in searchList" :key="item.index">
					<div class="choice-title">{{item.name}}</div>
					<el-select v-if="item.type == '1'" v-model="item.ivalue"
						:placeholder="item.placeholder">
						<el-option v-for="i in options" :key="i.value" :label="i.label" :value="i.value" />
					</el-select>
					<el-input v-model="item.ivalue" v-if="item.type=='2'" class="rounded-input"
						@blur="blurClick()" @focus="focusClick(item)" :placeholder="item.placeholder" />
				</div>
				<view class="choice-box">
					<div class="choice-btn">
						<el-button round :icon="Search" color="#0071bb">查询</el-button>
						<el-button round :icon="RefreshLeft">重置</el-button>
					</div>
				</view>
			</div>
			<div class="tables">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column type="selection" v-model="whole" />
					<el-table-column prop="id" label="序号" />
					<el-table-column prop="name" label="设备名称" />
					<el-table-column prop="imei" label="设备IMEI号" />
					<el-table-column prop="business" label="业务类型" />
					<el-table-column prop="inspect" label="查看">
						<template #default="scope">
							<div class="special" @click="goGoods">
								{{ scope.row.inspect }}
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="page_number">
				<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size"
					:disabled="disabled"  layout="prev, pager, next, jumper,total" :total="10"
					@size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import {Search, RefreshLeft } from '@element-plus/icons-vue'
	import type { ComponentSize } from 'element-plus'
	import { useRouter } from 'vue-router';
	interface searchList {
		name : string;
		index : string;
		placeholder : string;
		type : string;
		ivalue : string;
	}
	const router = useRouter();
	const whole = ref(false)
	const currentPage = ref(1);
	const pageSize = ref(1);
	const size = ref<ComponentSize>('small')
	const disabled = ref(false)
	const tableData = [
		{
			id: '1',
			date: '2024-05-20',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			business: '零售柜',
			inspect: '在售商品',
		},
		{
			id: '2',
			date: '2024-05-20',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			business: '零售柜',
			inspect: '在售商品',
		},
		{
			id: '3',
			date: '2024-05-20',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			business: '零售柜',
			inspect: '在售商品',
		}
	]
	const searchList = ref<searchList[]>([
		{
			name: '设备名称',
			index: '1',
			placeholder: '请输入',
			type: '2',
			ivalue: ''
		},
		{
			name: '设备IMEI',
			index: '2',
			placeholder: '请选择',
			type: '1',
			ivalue: ''
		},
		{
			name: '业务类型',
			index: '3',
			placeholder: '请选择',
			type: '1',
			ivalue: ''
		}
	])
	const options = [
		{
			value: 'Option1',
			label: 'Option1',
		},
		{
			value: 'Option2',
			label: 'Option2',
		},
		{
			value: 'Option3',
			label: 'Option3',
		},
		{
			value: 'Option4',
			label: 'Option4',
		},
		{
			value: 'Option5',
			label: 'Option5',
		},
	]
	const handleSizeChange = (val : number) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val : number) => {
		console.log(`current page: ${val}`)
	}
	const goGoods = () => {
		router.push('/for_sale');
	}
</script>

<style lang="scss" scoped>
	.sale-page {
		background-color: #fff;
		margin-top: 20px;
		padding: 20px 10px 0px 10px;

		.choice-list {
			display: flex;
			flex-wrap: wrap;

			.choice-item {
				width: 14.2%;
				display: flex;
				align-items: center;
				margin-bottom: 15px;

				.el-select {
					width: 160px;
				}

				.choice-title {
					font-size: 12px;
					width: 80px;
					text-align: center;
				}

				.rounded-input {
					width: 160px;
				}
			}

			.choice-box {
				width: 57%;
				display: flex;
				justify-content: right;

				.choice-btn {
					display: flex;
					justify-content: left;
				}
			}
		}


		.tables {
			margin-top: 10px;
			.special{
				color: #71abd8;
				cursor: pointer;
			}
		}

		.page_number {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10px 0;
		}
	}
</style>